<script setup>
import { userlist, DelUser } from '@/utils/lxz-axios'
import { ref } from 'vue'
import setUser from '@/components/userManage/setUser.vue'

const uslist = ref(null)

userlist().then((res) => {
  uslist.value = res.data.userlist
})

// 添加pet
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
const drawer = ref(false)
const drawer2 = ref(false)

const direction = ref('rtl')

const handleDrawer = () => {
  drawer.value = false
  drawer2.value = false

  console.log('更新1111')

  userlist().then((res) => {
    uslist.value = res.data.userlist
    // console.log("更新",uslist.value);
  })
}

// 修改pet
const handleClose2 = (done) => {
  ElMessageBox.confirm('修改状态不会保存，是否退出?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

let filterPet = null
const updatePet = (id) => {
  drawer2.value = true
  //   let updateUesr = uslist.value.find((item) => item._id == id)
  filterPet = uslist.value.find((item) => item._id == id)
  // console.log(filterPet.value);
}

// 删除
const deletePet = async (id) => {
  ElMessageBox.confirm(`确定要删除用户(id:${id})吗？`)
    .then(() => {
      const loading = ElLoading.service({
        lock: true,
        text: '敏感操作，正在验证！',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let tok = localStorage.getItem('token')

      //   console.log(id, tok)

      DelUser(id, tok).then((res) => {
        console.log(res.data)

        if (res.data.delcode == 1) {
          ElMessage.success(res.data.msg)
          loading.close()
          userlist().then((res) => {
            uslist.value = res.data.userlist
            // console.log("更新",uslist.value);
          })
          // done()
        } else {
          ElMessage.error(res.data.msg)
          loading.close()
          // done()
        }
      })
      //   setTimeout(() => {
      //     loading.close()
      //     done()
      //   }, 2000)
    })
    .catch(() => {
      // catch error
    })
}

// 查询
let search = ref('')
let searchinp = ref('')


</script>

<template>
  <div>
    <header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> homepage </el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="display: flex ;align-items: center; justify-content: space-between;">
        <el-cascader v-model="search" clearable :options="[
          { value: '1', label: '用户ID' },
          { value: '2', label: '用户名' },
          { value: '3', label: '用户类型' },
          { value: '4', label: '账户状态' },
        ]" placeholder="通过字段搜索" />
        <el-input v-model="searchinp" placeholder="请输入查询的信息" clearable />
        <div class="icon" @click="handleSelectClose" style="flex-shrink: 0;">查询</div>
      </div>
    </header>
    <div class="main">
      <div class="table-container">
        <table border="1">
          <thead>
            <tr>
              <th>用户ID</th>
              <th>用户名</th>
              <th style="text-align: center">用户类型</th>
              <th>注册日期</th>
              <th style="text-align: center">账户状态</th>

              <th style="text-align: center">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in uslist" :key="user._id" class="td-tag">
              <td>{{ user._id }}</td>
              <td>{{ user?.username }}</td>
              <td>
                <div class="tag1">
                  <el-tag v-if="user?.usertype == 'admin'" class="ml-2" type="warning">管理员</el-tag>
                  <el-tag v-if="user?.usertype == 'user'" class="ml-2" type="success">用户</el-tag>
                  <el-tag v-if="user?.usertype == 'vip'" class="ml-2">认证用户</el-tag>
                </div>
              </td>
              <td>{{ user?.time }}</td>
              <td>
                <!-- {{ user?.userstate }} -->
                <div class="tag1">
                  <el-tag size="large" v-if="user?.userstate == 'Active'" class="ml-2" type="success"
                    effect="dark">正&nbsp;&nbsp;&nbsp;常</el-tag>
                  <el-tag size="large" v-if="user?.userstate == 'Suspended'" class="ml-2" type="warning"
                    effect="dark">异&nbsp;&nbsp;&nbsp;常</el-tag>
                  <el-tag size="large" v-if="user?.userstate == 'Locked'" class="ml-2" type="danger "
                    effect="dark">封&nbsp;&nbsp;&nbsp;禁</el-tag>
                </div>
              </td>

              <td>
                <div class="btn">
                  <button class="one" @click.stop="updatePet(user._id)">修改</button>
                  <button class="del" @click.stop="deletePet(user._id)">删除</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 添加 -->
    <!-- <el-drawer
      v-model="drawer"
      title="添加新的用户"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <Adduslist @handleDraewr="handleDrawer"></Adduslist>
    </el-drawer> -->

    <!-- 修改 -->
    <el-drawer v-model="drawer2" title="修改用户信息" :direction="direction" size="50%" :before-close="handleClose2">
      <setUser @handleDraewr="handleDrawer" :filterPet="filterPet" :key="filterPet"></setUser>
    </el-drawer>
  </div>
</template>



<style lang="less" scoped>
.td-tag {
  .tag1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

header {
  padding: 10rem 30rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon {
    padding: 5rem 10rem;
    background-color: #409eff;
    color: #fff;
    border-radius: 4rem;
    margin-left: 8rem;
    font-size: 12rem;
  }
}

.select {
  height: 0;
  visibility: hidden;
  opacity: 0;
  margin: 8rem 20rem;
  padding: 0 20rem;
  background-color: #fff;
  border-radius: 10rem;
  transition: all 1s;
}

.main {
  z-index: 99;
 @theme-color: #f8f9fa;

  .table-container {
    margin: 20rem;
    font-family: 'Arial', sans-serif;
  }

  h2 {
    color: @theme-color;
    font-size: 24rem;
    margin-bottom: 18rem;
    display: flex;
    justify-content: space-between;

    .add {
      font-size: 20rem;

      button {
        padding: 6rem 12rem;
        border: none;
        cursor: pointer;
        border-radius: 4rem;
        font-size: 18rem;
        transition: background-color 0.3s;
        background-color: #409eff;
        color: white;
      }
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10rem;
    background-color: #fff;
    box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.05);
    border-radius: 8rem;
    overflow: hidden;
  }

  th,
  td {
    padding: 6rem 15rem;
    font-size: 14rem;
    text-align: left;
    border: 1rem solid #e0e0e0;
  }

  .btntd {
    padding: 6rem 0;
  }

  th {
    background-color: @theme-color;
    color: #9c9c9c;
    font-weight: 600;
    font-size: 14rem;
  }

  tbody tr:nth-child(even) {
    background-color: #f7f7f7;
  }

  tbody tr:hover {
    background-color: #f1f1f1;
  }

  tbody {
    .btn {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;

      .del {
        background-color: #ff4d4f;
        color: white;
      }

      .one {
        // background-color: #16ceaf;
        color: rgb(0, 0, 0);
      }
    }
  }

  button {
    padding: 6rem 10rem;
    border: none;
    cursor: pointer;
    border-radius: 4rem;
    font-size: 12rem;
    transition: background-color 0.3s;
  }

  .edit-btn {
    background-color: @theme-color;
    color: #fff;
    margin-right: 8rem;

    &:hover {
      background-color: darken(@theme-color, 10%);
    }
  }

  .delete-btn {
    background-color: #ff4d4f;
    color: #fff;

    &:hover {
      background-color: darken(#ff4d4f, 10%);
    }
  }
}

.pagination {
  width: 96%;
  display: flex;
  padding: 0 20rem;
  justify-content: end;
}

.el-form--inline .el-form-item {
  width: 100%;
}

.el-button,
.el-button.is-round {
  margin: auto;
  padding: 0 26rem;
}

.el-form {
  padding-top: 15rem;
}
</style>